<template>
		<u-popup :closeOnClickOverlay="false" :show="is_show" :bgColor="bgColor" :mode="model" round="15">
			<view :style="{width:width,borderRadius:radius}">
				<view  class=" border_radius_30" :style="{padding:paddding,borderRadius:radius}">
					<view v-if="title && showTitle" class="font-color-theme_title font-size-13 font-w-bold text-center">{{title}}</view>
					<view v-if="content" class="font-size-14 font-w-600 font-color-666 mt-16 text-center">{{content}}</view>
					<view v-if="parse" class="mt-10 paddding_left_right_30">
						<scroll-view scroll-y="true" style="max-height: 60vh;">
							<u-parse :content="handleLang(parse)"></u-parse>
						</scroll-view>
					</view>
					<slot name="content"></slot>
					<!-- <view @click="sureClick" class="bg_color_two_then sure_btn">{{sureText}}</view> -->
				</view>
				<u-gap v-if="is_show_btn" height="1rpx" bgColor="#f2f2f2" marginTop="25"></u-gap>
				<view v-if="is_show_btn" class="flex flex-ai-center" style="width: 100%;height: 112rpx;" >
					<view v-if="cancelShow" @click="cancel" class="flex flex-ai-center flex-js-center" style="width: 50%;height: 100%;border-right: 1rpx solid #f2f2f2;" :style="{color:cancelColor}">取消</view>
					<button v-if="buttonShow" style="padding: 0;margin: 0;" @click="confirm" :style="{color:confirmColor,width:cancelShow?'50%':'100%'}" >{{confirmText}}</button>
					<view v-else @click="confirm" class="flex flex-ai-center flex-js-center font-w-bold" style="height: 100%;" :style="{color:confirmColor,width:cancelShow?'50%':'100%'}">{{confirmText}}</view>
				</view>				
			</view>
			<view v-if="is_show_close" class="bold fontS32 mar_top30" style="text-align: center;">
				<slot name="btn"></slot>
				<view class="flex flex-ai-center flex-js-center" @click="cancel">
					<u-icon name="close"  size="30" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>  
</template>

<script>
	export default {
		name: "z-model",
		props:{  
			radius:{
				type:String,
				default:'33rpx'
			},
			showTitle:{
				type:Boolean,
				default:true
			},
			width:{
				type:String,
				default:'690rpx'
			},
			model:{
				type:String,
				default:'center'
			},
			title:{
				type:String,
				default:'温馨提示'
			},
			content:{
				type:String,
				default:''
			},
			parse:{
				type:String,
				default:''
			},
			pageObj:{
				type:Object,
				default:() => {
					return {}
				}
			},
			show:{
				type:Boolean,
				default:false
			},
			sureText:{
				type:String,
				default:"确定"
			},
			paddding:{
				type:String,
				default:"30rpx"
			},
			is_show_close:{
				type:Boolean,
				default:false
			},
			is_show_btn:{
				type:Boolean,
				default:false
			},
			cancelColor:{
				type:String,
				default:'#666'
			},
			confirmColor:{
				type:String,
				default:'#B91223'
			},
			cancelShow:{ 
				type:Boolean,
				default:true
			},
			confirmText:{
				type:String,
				default:'确认'
			},
			buttonShow:{
				type:Boolean,
				default:false
			},
			bgColor:{
				type:String,
				default:'#fff'
			}
		},
		data() {
			return {
				showModel:false
			};
		},
		model:{
			prop:'show',
			event:'change'
		},
		computed: {
			is_show: {
				get: function() {
					//实际使用的是value值
					return this.show;
				},
				set: function(val) {
					//侦听到setter()事件，将值传递回父级组件
					this.$emit('change', val);
				}
			},
		},
		methods:{
			sureClick(){
				this.$emit('click')
			},
			close(){
				 this.$emit('close', false); 
			},
			confirm(){
				this.$emit('confirm')
			},
			cancel(){
				this.is_show = false
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-fade-enter-active{ z-index: 999 !important; }
	/deep/ .u-fade-zoom-enter-active{ z-index: 999 !important; }
	.sure_btn {
		width: 320rpx;
		height: 80rpx;
		@extend .bg-color-theme;
		opacity: 1;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 48rpx;
		opacity: 1;
		text-align: center;
		line-height: 80rpx;
		margin: 90rpx auto 40rpx;
	}
</style>
